<template>
  <div class="login">
    <div class="bg"></div>
    <div class="btn">
      <van-form validate-first
                @failed="onFailed">
        <!-- 通过 pattern 进行正则校验 -->
        <van-field v-model="value1"
                   name="pattern"
                   label="工作号："
                   placeholder="正则校验"
                   :rules="[{ pattern, message: '请输入正确内容' }]" />
        <!-- 通过 validator 进行函数校验 -->
        <van-field v-model="value2"
                   label="密码："
                   name="validator"
                   placeholder="函数校验"
                   :rules="[{ validator, message: '请输入正确内容' }]" />
        <!-- 通过 validator 进行异步函数校验 -->
        <!-- <van-field v-model="value3"
                   name="asyncValidator"
                   placeholder="异步函数校验"
                   :rules="[{ validator: asyncValidator, message: '请输入正确内容' }]" /> -->
        <div style="margin: 16px; display:flex">
          <van-button round
                      block
                      type="info"
                      native-type="submit">登录</van-button>
          <van-button round
                      block
                      type="info"
                      native-type="submit">重置</van-button>
        </div>
      </van-form>
    </div>
  </div>
</template>

<script>
import Vue from 'vue'
import { Form } from 'vant'
import { Field } from 'vant'

Vue.use(Form)
Vue.use(Field)

import { Toast } from 'vant'

export default {
  data() {
    return {
      value1: '',
      value2: '',
      value3: '',
      pattern: /\d{6}/
    }
  },
  methods: {
    // 校验函数返回 true 表示校验通过，false 表示不通过
    validator(val) {
      return /1\d{10}/.test(val)
    },
    // 异步校验函数返回 Promise
    asyncValidator(val) {
      return new Promise(resolve => {
        Toast.loading('验证中...')

        setTimeout(() => {
          Toast.clear()
          resolve(/\d{6}/.test(val))
        }, 1000)
      })
    },
    onFailed(errorInfo) {
      console.log('failed', errorInfo)
    }
  }
}
</script>

<style lang="less">
@import './ceshi.less';
</style>